<template>
  <div>
    <div>
      <superSearch :searchDB="searchDB" :refundState="refundState" @search="getLists" class="search-box">
        <div slot="time">
          <a-range-picker allow-clear v-decorator="['time']" style="width: 100%">
            <a-icon slot="suffixIcon" type="calendar" />
          </a-range-picker>
        </div>
        <div slot="rType">
          <a-select
            style="margin: 0 10px; width: 225px"
            allow-clear
            v-decorator="['reasonType']"
            placeholder="请选择退款原因"
          >
            <a-select-option v-for="item in RefundReason" :key="item.id" :isdisabled="item.label" :value="item.label">
              <div>{{ item.value }}</div>
            </a-select-option>
          </a-select>
        </div>
        <div slot="cardNo">
          <a-input placeholder="客户卡号" allow-clear v-decorator="['cardNo']"></a-input>
        </div>
        <div slot="mobile">
          <a-input placeholder="联系号码" allow-clear v-decorator="['mobile']"></a-input>
        </div>
        <div slot="name">
          <a-input placeholder="客户姓名" allow-clear v-decorator="['name']"></a-input>
        </div>

        <div slot="phone">
          <a-input placeholder="联系方式" allow-clear v-decorator="['phone']"></a-input>
        </div>
        <div slot="typeId" style="width: 200px">
          <a-select
            option-filter-prop="children"
            allow-clear
            option-label-prop="label"
            style="width: 100%"
            v-decorator="['typeId']"
            placeholder="退款类型"
          >
            <a-select-option v-for="item in type" :key="item.id" :label="item.label" :value="item.value">{{
              item.label
            }}</a-select-option>
          </a-select>
        </div>
        <div slot="refundType" style="width: 200px">
          <a-select
            option-filter-prop="children"
            allow-clear
            option-label-prop="label"
            style="width: 100%"
            v-decorator="['developer']"
            placeholder="退款原因"
          >
            <a-select-option v-for="item in refundState" :key="item.id" :label="item.name" :value="item.id">{{
              item.name
            }}</a-select-option>
          </a-select>
        </div>
        <div slot="refundState" style="width: 200px">
          <a-select
            option-filter-prop="children"
            allow-clear
            option-label-prop="label"
            style="width: 100%"
            v-decorator="['developer']"
            placeholder="选择"
          >
            <a-select-option v-for="item in refundState" :key="item.id" :label="item.name" :value="item.id">{{
              item.name
            }}</a-select-option>
          </a-select>
        </div>
      </superSearch>
    </div>

    <addRefund :add="add" ref="addR" @addFun="getLists"></addRefund>
    <a-card class="g-mt-10" :bordered="false" style="background-color: #fff">
      <div class="btn">
        <a-button type="primary" @click="adds">新增退款</a-button>
      </div>
      <a-table
        :columns="cloumns"
        :data-source="data"
        :loading="sLoading"
        :pagination="pagination"
        @change="handleTableChange"
        :rowKey="(record, index) => record.customerId + index"
      >
        <a slot="name" slot-scope="text">{{ text }}</a>
        <span slot="customTitle"><a-icon type="smile-o" /> Name</span>
        <span slot="chargeState" slot-scope="chargeState">
          <a-tag :color="chargeState === '3' ? 'volcano' : chargeState === '4' ? 'geekblue' : 'green'">
            {{
              chargeState.toString() === '3'
                ? '未退款'
                : chargeState.toString() === '4'
                ? '已退款'
                : chargeState.toString() === '5'
                ? '已作废'
                : '未退完'
            }}
          </a-tag>
        </span>
        <div slot="action" slot-scope="text, record, index" style="display: flex; justify-content: space-between">
          <a-popconfirm title="作废该项数据?" @confirm="() => removeItem(record, index)">
            <a :disabled="types.toString() === '5' || types.toString() === '4'">作废</a>
          </a-popconfirm>
          <a @click="showDetail(record, types)">明细</a>
          <a :disabled="types.toString() === '5' || types.toString() === '4'" @click="adds(record)">修改</a>
          <a @click="showRefund(record, index)" :disabled="types.toString() === '5' || types.toString() === '4'"
            >退款</a
          >
        </div>
      </a-table>
    </a-card>

    <!--退款-->
    <super-refund :refund="refund" ref="refund" @getLists="getLists"></super-refund>
    <!--明细-->
    <super-drawer :drewerDB="drewerDB" :ids="id"></super-drawer>
  </div>
</template>
<script>
import superSearch from './superSearch.vue'
import { ToVoid } from '@/api/cashier/cashier'
import SuperDrawer from './superDrawer.vue'
import SuperRefund from './superRefund.vue'
import { getList } from '@/api/cashier/cashier'
import addRefund from './addRefund.vue'
export default {
  components: { SuperDrawer, SuperRefund, addRefund, superSearch },
  props: { types: {} },
  watch: {
    types() {
      console.log(this.types)
      this.queryParams.type = this.types
      this.getLists()
    },
  },
  mounted() {
    this.getLists()
  },
  data() {
    return {
      RefundReason: [
        { id: 1, value: '效果问题', label: '1' },
        { id: 2, value: '身体原因', label: '2' },
        { id: 3, value: '害怕手术', label: '3' },
        { id: 4, value: '家人反对', label: '4' },
        { id: 5, value: '暂不想做', label: '5' },
        { id: 6, value: '经济原因', label: '6' },
        { id: 7, value: '效果原因', label: '7' },
        { id: 8, value: '更改方案', label: '8' },
      ],
      pagination: {
        type: '',
        total: 0,
        pageSize: 20, //每页中显示10条数据
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '50', '100'], //每页中显示的数据
        showTotal: (total) => `共有 ${total} 条数据`, //分页中显示总的数据
      },
      refundState: [
        { id: 0, label: '未退款', value: '0' },
        { id: 1, label: '已退款', value: '1' },
        { id: 2, label: '已作废', value: '2' },
      ],
      type: [
        { id: 0, label: '退项目', value: '1' },
        { id: 1, label: '退预存款', value: '2' },
      ],
      searchDB: [
        { id: 3, label: '登记时间', test: 'test1', slot: 'time' },
        { id: 0, label: '客户卡号', test: 'test1', slot: 'cardNo' },
        { id: 2, label: '客户姓名', test: 'test1', slot: 'name' },
        { id: 4, label: '退款类型', slot: 'typeId' },
        { id: 1, label: '退款原因', slot: 'rType' },
      ],
      id: '',
      data: [],
      add: {
        dialogStyle: {
          top: '50px',
          right: '50px',
        },
        visible: false,
        title: '退款申请',
      },
      sLoading: false,
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        type: undefined,
      },
      cloumns: [
        {
          title: '申请退款日期',
          dataIndex: 'recordDate',
          key: 'recordDate',
          align: 'center',
          customRender: (recordDate) => {
            if (!recordDate) {
              return '-'
            } else {
              return recordDate
            }
          },
        },
        {
          title: '申请退款人',
          dataIndex: 'recorder',
          key: 'recorder',
          align: 'center',
          customRender: (recorder) => {
            if (!recorder) {
              return '-'
            } else {
              return recorder
            }
          },
        },
        {
          title: '申请退款类型',
          dataIndex: 'typeName',
          key: 'typeName',
          align: 'center',
          customRender: (typeName) => {
            if (!typeName) {
              return '-'
            } else {
              return typeName
            }
          },
        },
        // {
        //   title: '申请人',
        //   dataIndex: 'creater',
        //   key: 'creater',
        //   align: 'center',
        //   customRender: (creater) => {
        //     if (!creater) {
        //       return '-'
        //     } else {
        //       return creater
        //     }
        //   },
        // },
        // { title: '创建时间', dataIndex: '', key: '' },
        // { title: '创建人', dataIndex: '', key: '' },
        // { title: '修改时间', dataIndex: '', key: '' },
        // { title: '修改人', dataIndex: '', key: '' },
        {
          title: '客户姓名',
          dataIndex: 'name',
          key: 'name',
          align: 'center',
          customRender: (name) => {
            if (!name) {
              return '-'
            } else {
              return name
            }
          },
        },
        {
          title: '客户卡号',
          key: 'cardNo',
          dataIndex: 'cardNo',
          align: 'center',
          customRender: (cardNo) => {
            if (!cardNo) {
              return '-'
            } else {
              return cardNo
            }
          },
        },
        {
          title: '退款金额',
          dataIndex: 'amt',
          key: 'amt',
          align: 'center',
          customRender: (ramt) => {
            if (!ramt) {
              return '-'
            } else {
              return ramt
            }
          },
        },

        {
          title: '退款原因',
          dataIndex: 'reasonTypeName',
          key: 'reasonTypeName',
          align: 'center',
          customRender: (reasonTypeName) => {
            if (!reasonTypeName) {
              return '-'
            } else {
              return reasonTypeName
            }
          },
        },
        {
          title: '状态',
          key: 'chargeState',
          dataIndex: 'chargeState',
          align: 'center',
          scopedSlots: { customRender: 'chargeState' },
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' },
        },
      ],
      refund: {
        visible: false,
        refund: false,
        title: '退款',
      },
      drewerDB: {
        title: '退款明细',
        cs: [
          {
            title: '科室名称',
            dataIndex: 'departmentName',
            key: 'departmentName',
            align: 'center',
            ellipsis: true,
            customRender: (departmentName) => {
              if (!departmentName) {
                return '-'
              } else {
                return departmentName
              }
            },
          },
          {
            title: '项目名称',
            dataIndex: 'itemName',
            key: 'itemName',
            align: 'center',
            width: 200,
            ellipsis: true,
            customRender: (itemName) => {
              if (!itemName) {
                return '-'
              } else {
                return itemName
              }
            },
          },
          {
            title: '实收金额',
            dataIndex: 'rpAmt',
            key: 'rpAmt',
            align: 'center',
            ellipsis: true,
             
          },
          {
            title: '可退金额',
            key: 'rfAmt',
            dataIndex: 'rfAmt',
            align: 'center',
            ellipsis: true,
             
          },
          {
            title: '实退金额',
            key: 'ramt',
            dataIndex: 'ramt',
            ellipsis: true,
            align: 'center',
             
          },
          {
            title: '购买次数',
            dataIndex: 'rpqty',
            key: 'rpqty',
            align: 'center',
            ellipsis: true,
             
          },

          {
            title: '可退次数',
            dataIndex: 'rfqty',
            key: 'rfqty',
            ellipsis: true,
            align: 'center',
             
          },
          {
            title: '实退次数',
            key: 'rqty',
            dataIndex: 'rqty',
            ellipsis: true,
            align: 'center',
             
          },
        ],
        width: '1050px',
        closable: false,
        visible: false,
      },
    }
  },

  methods: {
    handleTableChange(pagination) {
      this.queryParams.pageNum = pagination.current
      this.queryParams.pageSize = pagination.pageSize
      console.log(pagination, this.queryParams)
      this.getLists()
    },
    getLists(db) {
      console.log(db, '页面list')
      if (db) {
        this.queryParams.typeId = db.typeId || undefined
        this.queryParams.startDate = db.startDate || undefined
        this.queryParams.endDate = db.endDate || undefined
        this.queryParams.name = db.name || undefined
        this.queryParams.cardNo = db.cardNo || undefined
        this.queryParams.reasonType = db.reasonType
      }
      //正常list
      this.sLoading = true
      this.queryParams.type = this.types
      getList(Object.assign(this.queryParams)).then((res) => {
        this.sLoading = false
        this.data = res.rows
        this.pagination.total = parseInt(res.total) || 0
        console.log(res)
      })
    },
    adds(record) {
      if (record.customerId) {
        this.$refs.addR.isfill(record)
      }
      this.add.visible = true
    },
    removeItem(record) {
      //作废
      let voidDB = {}
      voidDB.chargeState = 5
      voidDB.id = record.customerId
      voidDB.refundId = record.refundId
      console.log(voidDB)
      ToVoid(voidDB).then((res) => {
        if (res.code.toString() !== '200') return this.$message.error(res.msg || res.message)
        this.$message.success(res.msg || res.message)
        this.getLists()
      })
    },
    showRefund(record) {
      //拉起退款框
      this.refund = { ...this.refund, ...record }
      this.$refs.refund.getDB(record)
    },
    showDetail(record) {
      //查阅明细
      this.id = record.customerId
      this.drewerDB.types = this.types
      this.drewerDB.visible = true
      this.drewerDB.refundId = record.refundId
    },
  },
}
</script>
<style scoped lang="less">
.btn {
  // margin: 10px;
  // padding: 10px;
  margin-bottom: 10px;
}
/deep/ .ant-table-tbody tr {
  /* line-height: 50px !important; */
}
/deep/ .ant-table-tbody tr > td {
  /* line-height: 50px !important; */
}

/deep/ .search-box .ant-card-body {
  padding: 0px 10px 19px;
}
</style>